<template>
  <div class="login">
    <div class="login_box">
      <div class="header">
        <span>还没有账号?现在去免费注册!</span>
        <p class="btn" @click="goRegister">加入会员>></p>
      </div>
      <div class="l_content">
        <p class="close"></p>
        <p class="tit">每天更新15000条招标信息,20000000家招标单位<br/>有超过1000家企业通过我们获取商机</p>
        <input class="name" v-model="mobile" type="text" placeholder="请输入您的账号">
        <input class="pwd" v-model="password" type="password" placeholder="请输入您的密码">
        <p class="login" @click="login">登录</p>
        <p class="forget">忘记密码?</p>
      </div>
      <p class="tel">遇到其他问题,联系电话：400-1859959</p>
    </div>
  </div>
</template>

<script>
import {
  login
} from "@/api/api";
export default {
  data(){
    return {
      mobile:'',
      password:''
    }
  },
  name: 'Login',
  components: {
  },
  methods:{
    goRegister(){
      this.$router.push('/register');
    },
    // 登录
    login(){
      login({ mobile: this.mobile,password: this.password, }).then(res => {
        if(res.code==0){
          localStorage.setItem('token',res.token);
          localStorage.setItem('userInfo',JSON.stringify(res.user));
          this.$store.state.token = res.token;
          this.$store.state.login = true;
          this.$store.state.userInfo = JSON.stringify(res.user);
          this.$router.push('/');
        }else{
          alert(res.msg)
        }
        // if (res.token) {
        //   let env = "";
        //   if (window.location.hostname === "localhost") {
        //     env = "http://localhost:8080/";
        //   } else if (window.location.hostname === "123.57.68.113") {
        //     env = "http://123.57.68.113:8072/";
        //   } else {
        //     env = "https://mad.ms.zhangyue.net/";
        //   }
        //   const url = `${env}rtb/home/index`;
        //   window.open(url + `?fromSsp=${JSON.stringify(res)}`);
        // }
      });
    }
  }
}
</script>

<style lang="scss" scoped>  
  .login{
    min-width: 856;
    height: 100%;
    text-align: center;
    color: #333333;
    background: #000000;
    font-size: 18px;
  }

  .login_box{
    width: 856px;
    margin: auto;
  }
  .header{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 856px;
    height: 83px;
    border-radius:  0 0 8px 8px;
    background: #ffffff;
    margin: 0 auto 83px;
    .btn{
      border: 1px solid #575757;
      width: 201px;
      height: 41px;
      line-height: 41px;
      margin: 0 31px 0  65px;
      cursor: pointer;
    }
  }

  .l_content{
    position: relative;
    height: 490px;
    background-color: #2775AB;
    border-radius: 8px;
    margin: 0 auto 10px;
    overflow: hidden;
    margin-top: 46px;
    background-image: url("./../assets/login_bg.png");
    background-position:  top;
    background-repeat: no-repeat;
    .tit{
      font-size: 14px;
      color: #ffffff;
      margin-top: 58px;
    }
    .name,.pwd{
      padding-left: 73px;
      display: inline-block;
      width: 384px;
      height: 54px;
      background-color: #ffffff;
      border-radius: 4px;
    }
    .name{
      margin-top: 46px;
      background-image: url("./../assets/name.png");
      background-position: 13px 50%;
      background-repeat: no-repeat;
      background-size: 42px 29px;
    }
    .pwd{
      margin-top: 12px;
      background-image: url("./../assets/pwd.png");
      background-repeat: no-repeat;
      background-position: 13px 50%;
      background-size: 42px 29px;
    }
    .login{
      font-size: 22px;
      width: 457px;
      height: 54px;
      line-height: 54px;
      color: #ffffff;
      background-color: #e9b756;
      margin: 18px auto 0;
      border-radius: 4px;
    }
    .forget{
      font-size: 14px;
      color: #ffffff;
      width: 457px;
      text-align: right;
      text-decoration: underline;
      margin: 11px auto 0;
    }
    .close{
      position: absolute;
      top: 27px;
      left: 28px;
      width: 24px;
      height: 24px;
      background-image: url("./../assets/close.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .tel{
    font-size: 12px;
    margin-top: 33px;
    color: #ffffff;
  }
</style>
